<template>
  <div class="take-wrap">

    <el-row>
    <el-col :span="3">
      <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @select="orderType"
      >
      <el-menu-item index="0">
        <i class="el-icon-menu"></i>
        <span slot="title">全部</span>
      </el-menu-item>
      <el-menu-item index="1">
        <i class="el-icon-time"></i>
        <span slot="title">待付款</span>
      </el-menu-item> 
      <el-menu-item index="2">
        <i class="el-icon-truck"></i>
        <span slot="title">待发货</span>
      </el-menu-item>
      <el-menu-item index="3">
        <i class="el-icon-check"></i>
        <span slot="title">配送中</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-close"></i>
        <span slot="title">已完成</span>
      </el-menu-item>
      <!-- <el-menu-item index="5">
        <i class="el-icon-close"></i>
        <span slot="title">申请退款</span>
      </el-menu-item>
      <el-menu-item index="6">
        <i class="el-icon-close"></i>
        <span slot="title">退款中</span>
      </el-menu-item>
      <el-menu-item index="7">
        <i class="el-icon-close"></i>
        <span slot="title">完成退款</span>
      </el-menu-item>
      <el-menu-item index="8">
        <i class="el-icon-close"></i>
        <span slot="title">驳回退款</span>
      </el-menu-item> -->
      <el-menu-item index="9">
        <i class="el-icon-time"></i>
        <span slot="title">未支付</span>
      </el-menu-item>
      </el-menu>
    </el-col>
    <el-col :offset="1" :span="20">
        <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        >
        <el-table-column
        width="70"
        prop="id"
        label="订单ID"
        >
        </el-table-column>
        <el-table-column
        prop="order_sn"
        width="170"
        label="订单号"
        >
        </el-table-column>
        <el-table-column
          label="买家信息"
          width="300"
          >
        <template slot-scope="scope">
          <p style="margin: .1rem 0">收货人: <span style="color: #409eff"> {{ scope.row.params.address.realname }}</span></p>
          <p style="margin: .1rem 0">手机号码: <span style="color: #409eff"> {{ scope.row.params.address.mobile }}</span></p>
          <p style="margin: .1rem 0">地址: <span style="color: #409eff"> {{ scope.row.params.address | userAddress }}</span></p>
        </template>
        </el-table-column>
        <el-table-column
          prop="params"
          label="商品信息"
          width="400"
          >
          <template slot-scope="scope">
            <div class="good">
              <div class="avatar">
                <el-avatar :size="50" :src="scope.row.params.avatar"></el-avatar>
              </div>
              <div>
                <p>标题:{{ scope.row.params.title }}</p>
                <p>价格:{{ scope.row.params.price }}</p>
                <p>数量:{{ scope.row.params.number }}</p>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="实付款"
          width="100"
          align="center"
          >
          <template slot-scope="scope">
            <p class="sepc">{{ scope.row.price }}</p>
            <p class="sepc">含运费</p>
          </template>
        </el-table-column>
        <!-- <el-table-column
          prop="delivery"
          label="配送方式"
          width="100">
        </el-table-column> -->
        <el-table-column
          label="交易状态"
          width="110"
          >
          <template slot-scope="scope">
              <span :class="scope.row.status == 'Finish' ? '' : 'dn'" >已完成</span>
              <span :class="scope.row.status == 'Wait' ? '' : 'dn'" >未付款</span>
              <span :class="scope.row.status == 'Unpaid' ? '' : 'dn'">未支付</span>
              <span :class="scope.row.status == 'Dispatch' ? '' : 'dn'">配送中</span>
              <span :class="scope.row.status == 'Refund' ? '' : 'dn'">退款</span>
              <span style="color: rgb(64, 158, 255)" :class="scope.row.status == 'Paid' ? '' : 'dn'">待发货</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="110">
          <template slot-scope="scope">
            <el-button @click="getDetails(scope.row)" type="text" size="small">订单详情</el-button>
            <el-button @click="send(scope.row.id)" type="text" size="small">发货</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pages">
        <el-pagination
          @current-change="goPage"
          :current-page.sync="c_page"
          :page-size="1"
          layout="prev, pager, next, jumper"
          :total="l_page">
        </el-pagination>
      </div>
    </el-col>
    </el-row>
    <el-drawer
      title="详情"
      :visible.sync="detailsType"
      direction="rtl"
      class="sidebar"
      size="50%">
  
      <h2 class='detales-title'>基本信息</h2>
        <el-table
        :data="detailsInfo"
        style="width: 100%">
        <el-table-column
          prop="id"
          label="订单id"
          width="180">
        </el-table-column>
        <el-table-column
          prop="order_sn"
          label="订单号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="params.address.realname"
          label="买家">
        </el-table-column>
        <el-table-column
          prop="price"
          label="订单金额">
        </el-table-column>
      </el-table>
      <h2 class='detales-title'>商品信息</h2>
       <el-table
        :data="detailsInfo"
        show-summary
        style="width: 100%">
        <el-table-column
          prop="params.id"
          label="商品id">
        </el-table-column>
        <el-table-column
          prop="image"
          label="商品图片"
          width="180">
          <template slot-scope="scope">
            <el-avatar :src="scope.row.params.avatar"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column
          prop="params.title"
          label="商品名称">
        </el-table-column>
        <el-table-column
          prop="params.number"
          label="数量">
        </el-table-column>
        <el-table-column
          prop="params.price"
          label="单价">
        </el-table-column>
        <el-table-column
          label="总价">
          <template slot-scope="scope">
            <span>{{ scope.row.params.price  }}</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- <h2 class='detales-title'>收货人信息</h2>
      <el-form label-position="left" class="demo-table-expand" v-if-="detailsInfo != null">
          <el-form-item label="收货人名称">
            <span>{{ detailsInfo[0].params.address.realname }}</span>
          </el-form-item>
          <el-form-item label="收货人地址">
            <span>{{ detailsInfo[0].params.address  | userAddress }}</span>
          </el-form-item>
          <el-form-item label="收货人联系方式">
            <span>{{ detailsInfo[0].params.address.mobile }}</span>
          </el-form-item>
        </el-form> -->
      <!-- <h2 class='detales-title'>付款信息</h2>
      <h2 class='detales-title'>发货信息</h2> -->
    </el-drawer>


    <el-dialog
      title="发货"
      :visible.sync="sendType"
      width="30%"
      :close-on-click-modal="false"
      >
      <el-form :rules="rules" ref="sendData" :inline="true" :model="sendData" class="demo-form-inline">
        <el-form-item prop="value" label="快递类型 : ">
          <el-select  v-model="sendData.str" placeholder="请选择">
            <el-option
              v-for="item in SendOptions"
              :key="item.value"
              :label="item.value"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="str" label="快递单号 : ">
          <el-input v-model="sendData.num"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="sendType = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit('sendData')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Take',
  data(){
    return {
      statusData: null,
      tableData: null,
      detailsType: false,
      detailsInfo: null,
      SendOptions:[
        {
          value:'邮政EMS'
        },
        {
          value:'顺丰快递'
        },
        {
          value:'韵达快递'
        },
        {
          value:'圆通快递'
        },
        {
          value:'申通快递'
        },
        {
          value:'中通快递'
        },
        {
          value:'百事快递'
        }
      ],
      sendData:{
        str:null,
        num:null
      },
      rules:{
        str:[
           { required: true, message: '请选择快递类型', trigger: 'blur' }
        ],
        num:[
          { required: true, message: '请填写快递单号', trigger: 'blur' }
        ]
      },
      c_page: 1,
      l_page: null,
      sendType: false,
      order_id: null
    }
  },
  created(){
    this.getOrder('')
  },
  methods:{
    getOrder(type){ // 获取订单
      let params = {};
      params.page = this.c_page;
      this.$get('/api/store/admin/takeOrder/list/'+type,params).then(res=>{
        this.c_page = res.data.current_page;
        this.l_page = res.data.last_page;
        this.tableData = this.parse(res.data.data)
      }).catch(err=>{
        console.log(err);
      })
    },
    goPage(e){
      this.orderType(e)
    },
    orderType(e){
      this.c_page = this.c_page++;
      this.l_page = null;
      let type;
      switch (e) {
          case '1':
              type = 'Wait';
              break;


          case '2':
              type = 'Paid';
              break;

          case '3':
              type = 'Dispatch';
              break;

          case '4':
              type = 'Finish';
              break;

          case '5':
          case '6' : 
          case '7' : 
          case '8' :
              type = 'Refund';
              break;
          case '9':
              type = 'UnPaid';
              break;
          default:
              type = '';
              break;
      }
      this.getOrder(type)
    },
    getDetails(e){
      let arr = [];
      arr.push(e)
      this.detailsInfo = arr
      this.detailsType = true;
    },
    parse(e){
      let data = e.map(item=>{
        item.params = JSON.parse(item.params)
        return item
      })      
      return data
    },
    send(e){
      this.order_id = e;
      this.sendType = true
    },
    onSubmit(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = {};
          params.status = 'Dispatch';
          params.dispatch_info = JSON.stringify(this.sendData);
          this.$post('/api/store/admin/takeOrder/status/'+this.order_id,params).then(r=>{
             this.$message({
                message: r.message,
                type: 'success'
              });
          }).catch(err=>{
            
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  },
  filters:{
    filterMoney:function (value){
      return '￥' + value
    },
    userAddress: function (v){
      return v.province + v.city + v.county + v.address
    }
  }
}
</script>
<style lang="less" scoped>
.take-wrap {
  .good {
    display: flex;
    flex-wrap: nowrap;
    div p {
      margin: .1rem 0;
    }
  }
  .pages {
    padding: .25rem;
    text-align: center;
  }
  
}
.detales-title {
  padding: 0 0 0 1rem;
  margin: .5rem 0;
  font-weight: 400;
  color: #1f2f3d;
}

</style>
<style>
.sidebar  div.el-drawer {
    overflow-y: scroll;
}
</style>
